<template>
  <div class="detail-slot__module">
    <headerModule :simple="true" />
    <div :style="dynamicSize" class="main-wapper">
      <div class="left-group">
        <div class="body-wrapper">
          <slot>
            <simpleLoading />
          </slot>
        </div>
        <div class="comment-wrapper">
          <slot name="comment">
            <simpleLoading />
          </slot>
        </div>
      </div>
      <div class="right-group">
        <upInfoModule :upInfo="upInfo" @follow="$emit('follow')" />
        <div class="recommend-wrapper">
          <slot name="recommend">
            <simpleLoading />
          </slot>
        </div>
      </div>
      <!-- 用此元素来计算内容比例 -->
      <div class="dynamic_size" ref="dynamicSize" />
    </div>
    <elevatorModule />
    <footerModule />
  </div>
</template>

<script>
import headerModule from '@/components/header/index.vue';
import footerModule from '@/components/footer/index.vue';
import elevatorModule from '@/components/elevatorModule/index.vue';
import upInfoModule from './components/upInfoModule.vue';

export default {
    name: 'DetailSlot',
    components: {
        headerModule,
        footerModule,
        elevatorModule,
        upInfoModule,
    },
    props: {
        upInfo: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            size: Number(document.body.clientWidth) - 150,
            proportion: 16 / 9,
            scale: 0.8,
        };
    },
    computed: {
        videoID() {
            return this.$route.params.id;
        },
        dynamicSize() {
            return this.size > 988 ? `width: ${this.size}px` : 'width: 988px; padding: 0 76px';
        },
    },
    mounted() {
        this.resizeHandler();
        window.addEventListener('resize', this.resizeHandler, { passive: true });
    },
    destroyed() {
        window.removeEventListener('resize', this.resizeHandler, { passive: true });
    },
    methods: {
        resizeHandler() {
            if (this.$refs.dynamicSize.offsetWidth / this.$refs.dynamicSize.offsetHeight < this.proportion) {
                this.size = this.$refs.dynamicSize.offsetWidth * this.scale;
                return;
            }
            this.size = this.$refs.dynamicSize.offsetHeight * this.proportion * this.scale;
        },
    },
};
</script>

<style lang="less">
.detail-slot__module {
  .main-wapper {
    max-width: @bigWidth;
    min-width: 1008px;
    min-height: 50vh;
    margin: 50px auto;
    position: relative;
    z-index: 1;
    box-sizing: initial;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .left-group {
    width: calc(100% - @detailRightWidth);
    position: relative;
  }
  .right-group {
    width: @detailRightWidth;
    margin-left: @detailRightMarginLeft;
    height: auto;
    padding: 20px 10px;
    background-color: fade(#fff, 90%);
    border: 5px solid @base_color;
    box-shadow: 5px -5px 0px @base_color_2;
    flex-shrink: 0;
  }
  .dynamic_size {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
  }
  .body-wrapper,
  .comment-wrapper {
    min-height: 35vh;
    position: relative;
  }
  .recommend-wrapper {
    padding-top: 20px;
    min-height: 100%;
  }
}
</style>
